<template>
  <div class="register">
    <!-- 注册步骤 -->
    <van-steps :active="active">
      <van-step>验证手机号</van-step>
      <van-step>接受验证码</van-step>
      <van-step>注册</van-step>
      <van-step>完成</van-step>
    </van-steps>


    <!-- 每一步具体步骤 -->
    <div class="setp-1" v-if="active === 0">
      <van-cell-group inset>
        <van-field v-model.trim="tel" label="手机号码" placeholder="请输入手机号码" required />
      </van-cell-group>
      <van-button type="primary" szie="small" @click="handleSteps(0)">验证</van-button>
    </div>

    <div class="setp-2" v-if="active === 1">
      <van-cell-group inset>
        <van-field v-model.trim="tel" label="手机号码" placeholder="请输入手机号码" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="telcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary" @click="handleSendSms">发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <van-button type="primary" szie="small" @click="handleSteps(1)">验证</van-button>
    </div>

    <div class="setp-3" v-if="active === 2">
      <van-cell-group inset>
        <van-field v-model.trim="tel" label="手机号码" placeholder="请输入手机号码" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field 
        v-model="password" 
        :type="passType" 
        label="密码" 
        placeholder="请输入密码" 
        :right-icon="passIcon" 
        @click-right-icon="handleChangeType"
        />
      </van-cell-group>
      <van-button type="primary" szie="small" @click="handleSteps(2)">注册</van-button>
    </div>

    <div class="setp-4" v-if="active === 3">恭喜您，注册成功</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed,onBeforeUnmount} from 'vue';
import { check, getTelCode, verifyCode, register } from "@/api/register"
import { showNotify } from 'vant';
import router from '@/router';

//步骤中当前激活步骤索引
const active = ref(0);

//手机号码
const tel = ref<string>("13199876543")
//验证码
const telcode = ref<string>("")
//密码  
const password = ref<string>("")

//是否显示密码明文
const showPassword = ref<boolean>(false)

//密码输入框类型
const passType = computed(()  => showPassword.value ? "text" : "password")

//密码框后的图标
const passIcon = computed(() => showPassword.value ? "eye-o" : "closed-eye")

//切换密码框的类型
const handleChangeType = () =>{
  showPassword.value = !showPassword.value

}
//手机号是否已被注册
const handleCheck = async () => {
  if (!tel.value) {
    return
  }
  try {
    await check(tel.value)
    //下一步
    active.value += 1
  } catch (error) {
    showNotify("手机号已被注册")
  }
}


//发送验证码
const handleSendSms = async () => {
  try {
    const result: any = await getTelCode(tel.value)
    console.log("result:", result)
    //将验证码回显到文本框中
    telcode.value = result
  } catch (error) {
    console.error("error", error)
  }
}

//校验短信验证码
const handleCodeCheck = async () => {
  try {
    await verifyCode(tel.value, telcode.value)
    active.value += 1
  } catch (error) {
    console.error("error:", error)

  }
}


//用户注册
let timer:any = undefined
const handleRegister = async () => {
  //手机号与密码的非空验证
  try {
    await register(tel.value, password.value)
    active.value += 1
    //5秒自动跳转到登录
    timer = setTimeout(()=>router.push("./login"),5000)
  } catch (error) {
    console.error("error:", error)
  }

}

//组件卸载销毁时，需要将先前启动的定时任务关闭
onBeforeUnmount(()=>{
  window.clearTimeout(timer)
})

//步骤处理
const handleSteps = (index: number) => {
  switch (index) {
    case 0: //验证手机号是否被注册
      handleCheck()
      break
    case 1: //校验短信验证码
      handleCodeCheck()
      break
    case 2://注册
      handleRegister()
      break
  }
}
</script>

<style lang="less" scoped></style>
 